import { PlusOutlined } from "@ant-design/icons";
import { Button, Input, Space, Tag } from "antd";
import { useState } from "react";

interface ArrayInputProps {
    valueList: string[];
    onChange: (valueList: string[]) => void;
}

export default function ArrayInput(props: ArrayInputProps) {
    const [newValue, setNewValue] = useState("");

    return (
        <Space>
            {props.valueList.map((tag, tagIndex) => (
                <Tag key={`${tag}:${tagIndex}`}
                    closable
                    onClose={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        const tmpList = props.valueList.filter((_, index) => tagIndex != index);
                        props.onChange(tmpList);
                    }}>{tag}</Tag>
            ))}
            <Input addonAfter={
                <Button type="text" style={{ minWidth: "30px", padding: "0px 0px", height: "30px" }}
                    disabled={newValue.trim() == ""}
                    onClick={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        const tmpList = props.valueList.slice();
                        tmpList.push(newValue);
                        props.onChange(tmpList);
                        setNewValue("");
                    }}>
                    <PlusOutlined />
                </Button>}
                value={newValue}
                onChange={e => {
                    e.stopPropagation();
                    e.preventDefault();
                    setNewValue(e.target.value);
                }} />
        </Space>
    );
}
